import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import NewView from '../views/NewView.vue'
import FirstView from '../views/FirstView.vue'
import SecondView from '../views/SecondView.vue'
import VideoInfo1 from '../views/video/VideoInfo1.vue'
import VideoInfo2 from '../views/video/VideoInfo2.vue'
import ThirdView from '../views/ThirdView.vue'
import OneView from '../views/next/OneView.vue'
import TwoView from '../views/next/TwoView.vue'
import GuoView from '../views/GuoView.vue'
import ZhongView from '../views/ZhongView.vue'
import Add1 from '../views/AddOne.vue'
import ImageInfo1 from '../views/image/ImageInfo1.vue'
import ImageInfo2 from '../views/image/ImageInfo2.vue'
import MyForecast from '../views/image/Forecast.vue'
import Weather from '../views/WeatherView.vue'
import Buju from '../views/Buju.vue'
import Login from '../views/LoginView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/weather',
    name: 'weather',
    component: Weather
  },
  {
    path: '/buju',
    name: 'buju',
    component: Buju
  },
  {
    path: '/new1',
    name: 'add',
    component: Add1,
    props:true,
    children:[
      {path:'info1',name:'image-info1',component:ImageInfo1},
      {path:'info2',name:'image-info2',component:ImageInfo2},
      {path:'info3',name:'forecast',component:MyForecast}
    ]
  },
  {
    path: '/new/:id',
    name: 'me',
    component: NewView,
    props:true
  },
  {
    path: '/first/:id/:number',
    name: 'first',
    component: FirstView,
    props:true
  },
  {
    path: '/second/:id/:number/:me',
    name: 'second',
    component: SecondView,
    props:true,
    children:[
      {path:'info1',name:'video-info1',component:VideoInfo1},
      {path:'info2',name:'video-info2',component:VideoInfo2}
    ]
  },
  {
    path: '/third/:name',
    name: 'third',
    component: ThirdView,
    props:true,
    children:[
      {path:'info1',name:'one',component:OneView},
      {path:'info2',name:'two',component:TwoView}
    ]
  },
  {
    path: '/guo/:name',
    name: 'guo',
    component: GuoView,
    props:true,
    children:[
      {path:'a',name:'b',component:OneView},
      {path:'b',name:'a',component:TwoView}
    ]
  },
  {
    path: '/zhong/:name',
    name: 'zhong',
    component: ZhongView,
    props:true,
    children:[
      {path:'aa',name:'aa',component:OneView},
      {path:'bb',name:'bb',component:TwoView}
    ]
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  //mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// router.beforeEach((to,from,next)=>{
// alert('路由触发了！');
// next();
// });
export default router
